<!--  -->
<template>
    <div class="box">
        <div class="top">
            <p class="title">年龄比例</p>
            <p class="bg"></p>
        </div>

        <div class="charts" ref="charts"></div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue"
import * as echarts from "echarts"

const charts = ref()
onMounted(() => {
    let mycharts = echarts.init(charts.value)
    mycharts.setOption({
        title: {
            text: '本日总数',
            left: 'center',
            top: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            right: 30,
            top:40,
            orient: 'vertical',
            // left: 'right',
            textStyle: {
                color: 'white',
                fontSize: 14
            }
        },
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: true,
                    position: 'inside',
                    color:'white'

                },
                // emphasis: {
                //     label: {
                //         show: true,
                //         fontSize: 15,
                //         fontWeight: 'bold'
                //     }
                // },
                labelLine: {
                    show: false
                },
                data: [
                { value: 1048, name: '军事' },
                    { value: 735, name: '新闻' },
                    { value: 580, name: '直播' },
                    { value: 484, name: '娱乐' },
                    { value: 300, name: '财经' }
                ]
            }
        ]
    })

})
</script>

<style lang="scss" scoped>
.box {
    background: url(../../images//dataScreen-main-lc.png) no-repeat;
    background-size: 100% 100%;

    .top {
        .title {
            color: #ffffff;
            font-size: 16px;
            font-style: italic;

        }

        .bg {
            width: 68px;
            height: 7px;
            margin-top: 10px;
            background: url(../../images/dataScreen-title.png) no-repeat;
            background-size: 100% 100%;
        }



    }

    .charts {
        margin-top: 7%;
        height: 75%;
    }
}
</style>